/* 
*@module: login
*@module: description: 前端文件——登陆界面
*@author: 陈刚
*/

<template>
	<div class="login-container">
		<el-form
			ref="loginForm"
			:model="loginForm"
			:rules="loginRules"
			class="login-form"
			auto-complete="on"
			label-position="left"
		>
			<h3 class="title">上海市土壤环境质量监控和评价系统</h3>
			<h3 class="title">Monitoring and Evaluation System of Soil Environmental Quality in Shanghai</h3>

			<el-form-item prop="username">
				<span class="svg-container">
					<svg-icon icon-class="user" />
				</span>
				<el-input
					v-model="loginForm.username"
					name="username"
					type="text"
					auto-complete="on"
					placeholder="username"
				/>
			</el-form-item>

			<el-form-item prop="password">
				<span class="svg-container">
					<svg-icon icon-class="password" />
				</span>
				<el-input
					:type="pwdType"
					v-model="loginForm.password"
					name="password"
					auto-complete="on"
					placeholder="password"
					@keyup.enter.native="handleLogin"
				/>
				<span class="show-pwd" @click="showPwd">
					<svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
				</span>
			</el-form-item>

			<!-- <el-form-item prop="identify">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input v-model="loginForm.identify" name="identify" class="identify-input"
          @keyup.enter.native="handleLogin" />
			</el-form-item>-->

      <div class="identify-box">
        <el-input
          v-model="identify_text"
          name="identify"
          class="identify-input"
          @keyup.enter.native="handleLogin"
        />
        <div class="identify-box">
          <s-identify :identifyCode="identifyCode" @refresh="refreshCode"></s-identify>
        </div>
      </div>

			<el-form-item>
				<el-button
					:loading="loading"
					type="primary"
					style="width:100%;"
					@click.native.prevent="handleLogin"
				>登陆</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";
import identify from "@/components/identify/index";
export default {
	name: "Login",
	components: {
		"s-identify": identify
	},
	data() {
		return {
			loginForm: {
				username: "admin",
				password: "",
      		},
			identify_text: "",
			identifyCode: "",
			identifyCodes:"0123456789",
			loginRules: {
				// username: [{ required: true, trigger: 'blur', validator: validateUsername }],
				// password: [{ required: true, trigger: 'blur', validator: validatePass }]
			},
			loading: false,
			pwdType: "password",
			redirect: undefined
		};
	},

	mounted() {
		this.identifyCode = "";
		this.makeCode(4);
	},

	watch: {
		$route: {
			handler: function(route) {
				console.log("redirect", route);
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true
		}
	},
	methods: {
		showPwd() {
			if (this.pwdType === "password") {
				this.pwdType = "";
			} else {
				this.pwdType = "password";
			}
		},
		handleLogin() {
			if (!this.loginForm.username) {
				this.$message({
					message: "用户名不能为空",
					type: "warning"
				});
				return;
			}
			if (!this.loginForm.password) {
				this.$message({
					message: "密码不能为空",
					type: "warning"
				});
				return;
      }
      
      let identifyCode_low = this.identifyCode.replace(/[A-Z]/g, function(match){
        return match.toLowerCase()
      })
      if(this.identify_text !== identifyCode_low){
        this.$message({
					message: "验证码错误",
					type: "warning"
				});
				return;
      }

			this.loading = true;
			this.$store
				.dispatch("Login", this.loginForm)
				.then(data => {
					this.loading = false;
					if (data.code == 200) {
						this.$router.push({
							path: this.redirect || "/map/index"
						});
					} else if (data.code == 412) {
						this.$message.error("密码错误");
					} else if (data.code == 413) {
						this.$message.error("用户不存在");
					}
				})
				.catch(err => {
					console.log(err);
					this.loading = false;
				});
		},

		randomNum(min, max) {
			return Math.floor(Math.random() * (max - min) + min);
		},

		refreshCode() {
			console.log("identifyCodes", this.identifyCodes);
			this.identifyCode = "";
			this.makeCode(4);
		},

		makeCode(l) {
			for (let i = 0; i < l; i++) {
				this.identifyCode += this.identifyCodes[
					this.randomNum(0, this.identifyCodes.length)
				];
			}
			console.log(this.identifyCode);
		}
  },
  
  computed: {
        identifyCodes2(){           
            let str = ''
            for(let i=48;i<123; i++){
                if((i>57&& i<65) || (i>90 && i<97)){
                    continue
                }else {
                    str +=String.fromCharCode(i)
                }
            }
            console.log('str', str)
            return str
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;

/* reset element-ui css */
.login-container {
	.el-input {
		display: inline-block;
		height: 47px;
		width: 85%;

		input {
			background: transparent;
			border: 0px;
			-webkit-appearance: none;
			border-radius: 0px;
			padding: 12px 5px 12px 15px;
			color: $bg;
			height: 47px;

			&:-webkit-autofill {
				-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
				-webkit-text-fill-color: #fff !important;
			}
		}
	}

  .identify-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .identify-input {
      width: 55% ;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      margin-bottom: 10px;
      color:#000000;
	  }

    .identify-box {
      cursor: pointer;
	  }
  }
	

	.el-form-item {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		color: #454545;
	}

  
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
	width: 100%;
	height: 100%;
	background: url("../../../static/img/background2.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.login-form {
		position: absolute;
		left: 0;
		right: 0;
		width: 520px;
		max-width: 100%;
		padding: 35px 35px 15px 35px;
		margin: 80px auto;
	}

	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;

		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}

	.svg-container {
		padding: 6px 5px 6px 15px;
		color: $dark_gray;
		vertical-align: middle;
		width: 30px;
		display: inline-block;
	}

	.title {
		font-size: 26px;
		font-weight: 400;
		color: #2d3a4b;
		margin: 0px auto 40px auto;
		text-align: center;
		font-weight: bold;
	}

	.show-pwd {
		position: absolute;
		right: 10px;
		top: 7px;
		font-size: 16px;
		color: $dark_gray;
		cursor: pointer;
		user-select: none;
	}
}
</style>
